<!-- 搜索页 -->
<template>
	<view>
		<view class="search" id='search' >
			<!-- 搜索框 -->
			<view class="search_box">
				<view class="input_box">
					<view class="input">
						<image src="/static/img/common_ic_01_bbb.png"></image>
						<input :focus="focus" hold-keyboard="true" confirm-type="search" @confirm="confirm" type="text" v-model="input_value"
						 placeholder="请输入搜索内容" />
					</view>
					<view class="del" v-if="input_value.length > 0" @click="input_value = ''">
						<image src="/static/img/x.png"></image>
					</view>
				</view>
			</view>
			<!-- 热门搜索、热门分类、搜索历史 -->
			<view class="content" v-if="!show_result">
				<search-label ref="search_w"  :labelList="labelList" @fun="fun" @selectLabel="selectLabel"></search-label>
			</view>
			<!-- 搜索结果 -->
			<view class="result" v-if="show_result">
				<dropdown-menu ref="dropdownMenu" :top="top" @selectOption="selectOption"></dropdown-menu>
				<view class="search_list" style="padding-top: 112rpx;">
					<view class="item" v-if="show_index === 0 || show_index === 1" >
						<text>商品</text>
						<goods-list :goods_data="goods" ></goods-list>
					</view>
					<view class="item" v-if="show_index === 0 || show_index === 2">
						<text>商家</text>
						<store :store_data="notice"></store>
					</view>
					<view class="item" v-if="show_index === 0 || show_index === 3">
						<text>电影票</text>
						<goods-list :goods_data="goods"></goods-list>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	import searchLabel from "@/pages/index/search/search-label.vue";
	import dropdownMenu from "@/pages/index/search/dropdown-menu.vue";
	export default {
		components: {
			searchLabel,
			dropdownMenu
		},
		data() {
			return {
				focus: true,				// 是否自动聚焦
				input_value: '',			// 搜索框输入的值
				// 搜索的标签
				labelList: [{
					name: '热门搜索',
					fun: '展开',
					label: ['羽绒服', '四件套', '保暖内衣', '拖鞋', '运动鞋', '口罩', '牛仔裤', '拖鞋', '运动鞋', '口罩', '牛仔裤']
				}, {
					name: '热门分类',
					fun: '展开',
					label: ['新人特惠', '热销爆款', '女式运动鞋', '男式运1','新人特惠', '热销爆款', '女式运动鞋', '男式运1', '男式运1', '男式运1']
				}, {
					name: '搜索历史',
					fun: '清空',
					label: []
				}],
				show_result: false,			// 是否展示搜索结果
				top: 0,						// 下拉菜单距离顶部距离
                searchTop:0,                 // 整体页面距离顶部距离
				show_index: 0,				// 显示列表为全部还是其他
				show_sort: 0,               // 综合排序
				title: ['商品','商户'],		// 搜索到的标题	
			};
		},
		watch: {
			input_value(val) {
				if(!val){
					this.show_result = false
				}
			},
		},
		computed: {
            ...mapState({
				goods: state => state.init.goods,
				notice: state => state.init.notice,
                titleBarHeight : state => state.init.data.navHeight,
                statusBarHeight : state => state.init.data.statusBarHeight
            })
		},
		methods: {
			jump() {
				console.log("11")
			},
			// 添加搜索历史
			addHistory(value) {
				this.labelList.forEach(item => {
					if (item.name !== '搜索历史') {
						return ;
					}
					var flag = true
					item.label.forEach(items => {
						if(value === items){
							flag = false
						}
					})
					flag && item.label.push(value)
					// console.log("items",item.label)
				})
			},
			// 软键盘点击搜索操作
			confirm() {
				this.addHistory(this.input_value)
				this.show_result = true
			},
			// 点击展开或者清空功能
			fun(data) {
				let {item, index} = data;
				switch(item.fun){
					case '展开':
						this.$set( this.labelList[index],'fun', '收起')
						this.$set( this.labelList[index],'height', '100%')
						break;
					case '收起':
						this.$set( this.labelList[index],'height', undefined)
						this.$set( this.labelList[index],'fun', '展开')
						break;
					case '清空':
						this.labelList[index].label =[];
						break;
					default:
						break;
				}
			},
			// 选择标签项
			selectLabel(value) {
				this.input_value = value
				this.focus = false
				this.show_result = true
				this.addHistory(value)
			},
			upexchange() {    // 销量排序
				this.goods.sort((a,b)=>{
					return b.exchange - a.exchange;
				 })
				 // console.log(this.goods,'goods')
			  },
			sellerexchange() {    // 销量排序
				this.notice.sort((a,b)=>{
					return b.num - a.num;
				 })
				 // console.log(this.goods,'goods')
			  },
			upscore() {    // 价格最高排序
				this.goods.sort((a,b)=>{
					return b.score - a.score;
				 })
				// console.log(this.goods,'score');
			  },
			downscore() {    // 价格最低排序
				this.goods.sort((a,b)=>{
					return a.score - b.score;
				 })
			  },
			update() {    // 最新排序
				this.goods.sort((a,b)=>{
					let aTime = a.date
					let bTime = b.date
					aTime = aTime.replace(/-/g,'/') //将其中的‘-’替换为‘/’
					bTime = bTime.replace(/-/g,'/')
					let aDate = new Date(aTime).getTime() //转换为距1970年的毫秒
					let bDate = new Date(bTime).getTime()
					return bDate - aDate
				 })
			  },
			selectOption(active, index) {
				if(active === 0) {
					this.show_index = index
				}
				if(active === 1) {
					this.show_sort = index
					switch(true){
						case this.show_sort == 1:
							this.upexchange()
							this.sellerexchange()
							break;
						case this.show_sort == 2:
							this.update();
							break;
						case this.show_sort == 3:
							this.downscore()
							break;
						case this.show_sort == 4:
							this.upscore()
							break;
						default:
							break;
					}
				}
			}
		},
		beforeCreate() {},
		created() {
		},
		beforeMount() {},
		mounted() {
			// console.log(this.goods,'goods')
            let that = this;
			that.$getDom('#search').exec(data => {
				that.top = data[0].top * 2 + 112 
			})
            that.searchTop = (that.titleBarHeight + that.statusBarHeight) * 2 + 'rpx';
		},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
<style>
/* 	page {
		background-color: #FFFFFF;
	} */
</style>

